<html lang="en">
<head>
    <title>门票分类管理</title>
    <#include "../common/header.ftl">
    <link rel="stylesheet" href="/js/plugins/bootstrap-treeview/bootstrap-treeview.css" type="text/css"/>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/bootstrap-treeview/bootstrap-treeview.js"></script>

    <script>

        $(function () {
            $.post("/landmarkTicket/serachLandmarkTicket.do", function (data) {
                $('#treeview').treeview({
                    color: "#428bca",
                    showTags: true,
                    data: [{text: "全部景点门票", nodes: data}],
                    // + 号图标响应事件
                    lazyLoad: function (node) {
                        $.post("/landmarkTicket/serachLandmarkTicket.do", {parentId: node.id}, function (subData) {
                            // 添加子节点,参数1 : 固定格式,参数2: [要添加的数据,添加给哪个节点]
                            $('#treeview').treeview('addNode', [subData, node]);
                        })
                    },
                    // 获取选中节点的子地区
                    onNodeSelected: function (event, data) {
                        $.post("/landmarkTicket/serachLandmarkTicket.do", {parentId: data.id}, function (data) {
                            $('#tbody').html("");
                            var html;
                            // 遍历所有的子级地区
                            $.each(data, function (index, value) {
                                // 拼接显示页面
                                var ahtml = "<a href='javascript:;' data-json='" + value.json + "' class='editBtn'>编辑</a>"
                                html += "<tr><td>" + (index + 1) + "</td><td>" + value.text + "</td><td>" + ahtml + "</td></tr>";
                            });
                            $('#tbody').html(html);
                            /*$('.editBtn').click(function () {
                                alert(1);
                            });*/
                        })
                    }

                });
            });
            // 动态绑定事件编辑
            $('#tbody').on('click', '.editBtn', function () {
                var data = $(this).data('json');
                $('#editForm input[name="parent.id"]').val(data.pid);
                $('#editForm input[name="parent.name"]').val(data.pname);
                $('#editForm input[name="id"]').val(data.id);
                $('#editForm input[name="name"]').val(data.name);
                $('#editForm select[name="state"]').val(data.state);
                $('#editModal').modal('show');
            })
            var parentDiv = $('#parentDiv');
            // 保存操作
            $('.saveBtn').click(function () {
                $('#editForm input[name="parent.id"]').after(parentDiv);
                var node = $('#treeview').treeview('getSelected')[0];
                if (node) {
                    $('#editForm input[name="parent.id"]').val(node.id);
                    $('#editForm input[name="parent.name"]').val(node.text);
                } else {
                    $.messager.alert("温馨提示", "您未选择上级景点,此次添加为顶级大标题");
                    parentDiv.detach();
                }
                $('#editModal').modal('show');
            });


            // 编辑保存提交表单
            $('.btn_submit').click(function () {
                $('#editForm').ajaxSubmit(function (data) {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        $.messager.alert("温馨提示", data.msg);
                    }
                });

            });
        });

    </script>

</head>
<body>
<!--左侧菜单回显变量设置-->
<#assign currentMenu="landmarkTicket">
<div class="container " style="margin-top: 20px">
    <#include  "../common/top.ftl">
    <div class="row">
        <div class="col-sm-2">
            <#include  "../common/menu.ftl">
        </div>
        <div class="col-sm-10">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">景点门票分类管理</h1>
                </div>
            </div>
            <a href="JavaScript:;" class="btn btn-success btn_input_modal saveBtn"><span
                    class="glyphicon glyphicon-plus"></span> 添加</a>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>
                <div class="col-sm-8">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">景点门票分类编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/landmarkTicket/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" value="" name="id">
                    <input type="hidden" value="" name="parent.id">
                    <div class="form-group" id="parentDiv">
                        <label class="col-sm-3 control-label">上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="parent.name" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-6">
                            <select name="state" class="form-control">
                                <option value="1">大标题</option>
                                <option value="2">推荐页面专题</option>
                                <option value="0">其他</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn_submit">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>